<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="screen">
    <div class="elheader">
      <h2>青岛港散杂货皮带机异物监控平台</h2>
      <div class="h1va-r">
        <span>今日告警：23（未处理 5）</span>
        <span>运行时长：128h 35m </span>
        <span> {{ currentTime }}</span>
      </div>
    </div>
    <div class="main-container">
      <!-- 左侧 -->
      <div class="video-panel">
        <!-- 视频 -->
        <div class="video-container">
          <div style="width: 100%; height: 100%; background: #333">
            <!-- <video
              style="height: 100%; width: 100%"
              controls
              autoplay
              
            >
             <source src="E:/demo1/trailer.mp4" type="video/mp4">
            </video> -->
            <!-- <videoapp></videoapp> -->
            <video style="height: 100%; width: 100%" controls autoplay>
              <source src="http://10.51.253.220:3000/api/video" type="video/mp4" />
              您的浏览器不支持 video 标签。
            </video>
            <!-- <img style="height: 100%; width: 100%" src="http://10.51.253.220:8082/video_feed" alt=""> -->
          </div>
        </div>

        <!-- 设备 -->
        <div class="device-info">
          <span>当前皮带机：QD-03-12#</span>
          <span>{{ currentTime }}</span>
        </div>
        <!-- 快照 -->
        <div class="snapshots">
          <div
            class="snapshot-card"
            v-for="(item, index) in tableData"
            ref="moveMe"
            :key="index"
          >
            <el-popover
              placement="right"
              trigger="hover"
              v-if="item.image_path"
            >
              <img
                :src="item.image_path"
                style="height: 650px; width: 1200px"
              />
              <img
                slot="reference"
                :src="item.image_path"
                style="height: 100%; width: 100%"
              />
            </el-popover>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="info-panel">
        <!-- 卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="card-title">今日告警统计</div>
            <div>
              <span style="font-size: 26px; color: red">23</span>
              <span style="font-size: 16px; color: #8c8c8c">(未处理 5)</span>
            </div>
            <div style="margin-top: 15px">
              <el-progress :percentage="70" :show-text="false"> </el-progress>
            </div>
          </div>
          <div class="stat-card">
            <div class="card-title">处理进度</div>
            <div
              class="progress-percent"
              style="font-size: 36px; color: #52c41a"
            >
              70%
            </div>
            <div
              style="
                display: flex;
                justify-content: center;
                gap: 15px;
                font-size: 14px;
              "
            >
              <span>已处理：16</span>
              <span>进行中：3</span>
              <span>未处理：4</span>
            </div>
          </div>
          <div class="stat-card">
            <!-- <div class="card-title">告警类型分布</div> -->
            <test></test>
          </div>
        </div>
        <h3 style="margin-bottom: 15px; text-align: center">
          实时告警列表（最近20条）
        </h3>
        <div class="alert-table">
          <rightTable :tableData="tableData"></rightTable>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import test from "@/components/test.vue";
import rightTable from "@/components/rightTable.vue";
// import videoapp from "@/components/videoapp.vue";

import { getTableDatas, getTablevideo } from "@/api/configHttp";
export default {
  id: "easyroadShows",
  components: { test, rightTable },
  props: {},
  data() {
    return {
      currentTime: "",
      inverterMonTimer: null, //设置定时刷新，五分钟一次
      tableData: [],
      videoUrl: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // console.log(URL.createObjectURL('E:/demo1/trailer.mp4'),'=');
    this.getTablevideo();
    this.inverterMonTimer = setInterval(() => {
      this.getTableData();
    }, 1000);
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.inverterMonTimer);
    this.inverterMonTimer = null;
  },
  methods: {
    getTableData() {
      getTableDatas()
        .then((res) => {
          this.tableData = res;
        })
        .catch(() => {});
    },
    getTablevideo() {
      getTablevideo()
        .then((res) => {
          this.videoUrl = res;
          console.log(this.videoUrl, "this.videoUrl");
        })
        .catch(() => {});
    },
    handle(val, row) {
      console.log(val, "操作", row);
    },
    updateTime() {
      const beijingTimeZoneOffset = 8; // 北京时间是东八区，UTC+8
      const now = new Date();
      const utc = now.getTime() + now.getTimezoneOffset() * 60 * 1000;
      const beijingTime = new Date(utc + 3600 * 1000 * beijingTimeZoneOffset);
      const year = beijingTime.getFullYear();
      const month = String(beijingTime.getMonth() + 1).padStart(2, "0");
      const day = String(beijingTime.getDate()).padStart(2, "0");
      const hours = String(beijingTime.getHours()).padStart(2, "0");
      const minutes = String(beijingTime.getMinutes()).padStart(2, "0");
      const seconds = String(beijingTime.getSeconds()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style lang="less" scoped>
.screen {
  background-color: #2d3035;
  color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.elheader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom: 3px solid #1890ff;
  height: 80px;
}
.elheader h2 {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.h1va-r {
  position: absolute;
  right: 30px;
  font-size: 1.1rem;
}
.main-container {
  display: flex;
  height: calc(100vh - 80px);
  .video-panel {
    flex: 3;
    padding: 25px;
    border-right: 2px solid #3d4047;
    .video-container {
      background: #000;
      height: 65vh;
      border-radius: 8px;
      overflow: hidden;
    }
    .device-info {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #8c8c8c;
    }
    .snapshots {
      display: flex;
      width: 1100px;
      gap: 20px;
      padding: 25px 0;
      overflow-x: auto;

      .snapshot-card {
        min-width: 240px;
        height: 140px;
        background: #3d4047;
        border-radius: 6px;
        border: 2px solid red;
      }
    }
  }
  .info-panel {
    flex: 2;
    padding: 25px;
    background: #25282e;
    display: flex;
    flex-direction: column;
    color: #fff;
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 25px;
      .stat-card {
        background: #35393f;
        border-radius: 8px;
        padding: 20px;
        min-height: 200px;
        text-align: center;
        .card-title {
          color: #8c8c8c;
          font-size: 16px;
          margin-bottom: 15px;
        }
      }
    }
    .alert-table {
      // width: calc(100% + 16px);
      border-collapse: collapse;
      flex-grow: 1;
      overflow-y: overlay;
      display: block;
      table-layout: fixed;
    }
  }
}
/* 滚动条整体宽度和高度 */
.alert-table::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条轨道背景颜色和圆角 */
.alert-table::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 滚动条滑块背景颜色和圆角 */
.alert-table::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* 鼠标悬停时滑块背景颜色 */
.alert-table::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}
/* 滚动条整体宽度和高度，这里宽度是横向滚动条的高度，高度是纵向滚动条的宽度 */
.snapshots::-webkit-scrollbar {
  width: 8px; /* 横向滚动条的高度 */
  height: 8px; /* 纵向滚动条的宽度 */
}

/* 滚动条轨道背景颜色和圆角 */
.snapshots::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 滚动条滑块背景颜色和圆角 */
.snapshots::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* 鼠标悬停时滑块背景颜色 */
.snapshots::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}
</style>
